<template lang="pug">
div(id="container2" @click.stop="rand")
</template>

<script lang="ts" setup>
import {Gauge} from '@antv/g2plot'
import {onMounted, ref} from 'vue'

const gauge = ref<Gauge>()

const rand = () => gauge.value?.changeData(Math.random())

const opts = {
  percent: 0.75,
  range: {
    ticks: [0, 0.3, 0.7, 1],
    // color: 'l(0) 0:#F4664A 0.3:#FAAD14 0.7:#30BF78 1:#3D76DD'
    color: ['#F4664A', '#FAAD14', '#30BF78'],
  },
  indicator: false,
  innerRadius:0.8,
  // indicator: {
  //   pointer: {
  //     style: {
  //       stroke: '#D0D0D0',
  //     },
  //   },
  //   pin: {
  //     style: {
  //       stroke: '#D0D0D0',
  //     },
  //   },
  // },
  axis: {
    label: {
      formatter(v: string) {
        return Number(v) * 100;
      },
    },
    subTickLine: {
      count: 3,
    },
  },
  // type: 'meter',
  statistic: {
    content: {
      formatter: ({percent}) => `Rate: ${(percent * 100).toFixed(0)}%`,
      style: {
        color: 'rgba(0,0,0,0.65)',
        fontSize: 20,
      },
    },
  },
}
onMounted(() => {
  gauge.value = new Gauge('container2', opts);
  gauge.value?.render();
})


</script>
<script lang="ts">
export default {
  name: 'G2Gauge'
}
</script>
<style lang="scss" scoped>
#container2 {
  width: 100%;
  height: 150px;
}
</style>
